<template>
  <div class="card" ref="card" @click="goVideoList">
      <img :src="courseImgUrl" >
      <div class="card_infos">
          <p class="card_title">{{courseTitle}}</p>
          <p class="card_num">{{courseNum}}</p>
          <p class="card_type">{{courseType}}</p>
      </div>
  </div>
</template>

<script>
    export default {
        name:'card',
        props:{  
             courseImgUrl:{
                 type:String
             },         
             courseTitle:"",
             courseNum:"",
             courseType:""
        },
        methods:{
            goVideoList(){
                this.$emit('goVideoList')
            }
        }
    }
</script>

<style lang='scss' scoped>
@function p2r($px){
    @return ($px/40px)*1rem
}
.card{
    width: 100%;
    height: p2r(140px);
    display: flex;
    margin-bottom: p2r(40px);
    img{
        width: p2r(260px);
        border-radius: 5px;
        margin-right: p2r(20px);
    }
    .card_infos{
        height: 100%;
    }
    .card_title{
        font-size: p2r(32px);
        margin-bottom: p2r(16px);
        font-weight: bold;
    }
    .card_num{
        font-size: p2r(24px);
        margin-bottom: p2r(14px);
        color: rgb(175, 175, 175);
    }
    .card_type{
        font-size: p2r(28px);
        color: rgb(236, 198, 25);
    }
}
</style>